<template>
  <div id="app">
    <!-- <div id="status-bar" style="position: relative;"></div> -->
    <div class="w-full h-full">
      <keep-alive>
        <router-view class="appContent" v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view class="appContent" v-if="!$route.meta.keepAlive"></router-view>
      <Footer v-if="$route.meta.footer"></Footer>
    </div>
  </div>
  <!-- <loading v-else /> -->
</template>

<script>
import { mapState } from 'vuex'
// import Loading from '@/components/loading'
import Footer from '@/components/footer'
import { mapActions, mapMutations, mapGetters } from 'vuex';
import { SET_CURRENCY, SET_KEFU, SET_CONFIG } from '@/store/const.store';
import { changeTheme, setStorage, getStorage, setSessionStorage, getSessionStorage } from '@/utils/utis'
import { encryptDes, decryptDes } from '@/utils/des'
import axios from "axios";
import { BASE_URL } from "@/config";
import { signatureGenerate } from "@/utils/signatureUtil"
import { _getExchangeRate } from './API/home.api';
export default {
  name: "App",
  data() {
    return {
      initReady: false, // 获取初始化信息， 【货币单位】
      transitionName: '',
    }
  },
  async created() {
    window.onload = function () {
      document.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      });
      var lastTouchEnd = 0;

      document.addEventListener('touchend', function (event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();

        }
        lastTouchEnd = now;
      }, false);
      document.addEventListener('gesturestart', function (event) {
        event.preventDefault()
      });
    }
    let usercode = this.geturlkey('usercode');
    if (usercode) { //
      setStorage('usercode', usercode);
    }
    await this.init();
    //document.addEventListener('touchmove', function (e) { e.cancelable && e.preventDefault(); }, false);
  },
  mounted() {
    window.document.documentElement.setAttribute('data-theme', this.theme)
    changeTheme(this.theme)
    console.log(this.theme, 'theme')
  },
  components: {
    // loading: Loading,
    Footer
  },
  methods: {
    ...mapActions('home', [SET_KEFU]),
    ...mapActions('user', [SET_CONFIG]),
    ...mapMutations('language', ['setLanguage']),
    ...mapMutations('home', [SET_CURRENCY]),
    async init() {
      await this.verifyLink();
      this.setLanguage(this.$i18n.locale)
      await this.SET_KEFU()
      await this.SET_CONFIG()
      // this.initReady = true
    },
    geturlkey: function (name) {
      return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
    },
    async verifyLink(url) {
      let baseUrl = BASE_URL;
      const { signature, timestamp, systemRandom } = signatureGenerate()
      if (url) {
        baseUrl = url;
      }
      _getExchangeRate().then(res => {
        this.SET_CURRENCY(res.data.data)
        if (url) {
          setSessionStorage('tzlj', url)
        }
      }).catch(err => {
        this.getConditionUrl();
      })
    },
    getConditionUrl() {
      let jbbhm = "";
      if (getSessionStorage('jbbhm')) {
        jbbhm = getSessionStorage('jbbhm');
      }

      let ushm = "";

      if (this.userInfo.username) {
        ushm = this.userInfo.username;
      }

      var idValue = "";
      if ((navigator.userAgent).indexOf('Html5Plus') > -1) {
        idValue = this.APPZZ //app
      } else {
        idValue = this.H5ZZ //h5
      }
      const { signature, timestamp, systemRandom } = signatureGenerate()
      axios({
        method: 'get',
        url: 'https://www.anedhaude.xyz/d874f01760d88/2c948A82760/5segRVQ14232ad',
        params: {
          zsgcs: encryptDes(idValue, 'iiid'),
          jbbhm: encryptDes(jbbhm, 'vvvversion'),
          ushm: encryptDes(ushm, 'userrrr'),
        },
        headers: {
          sign: signature,
          tissuePaper: timestamp,
          systemRandom
        },
        dataType: 'json',

      }).then(res => {
        if (res.data) {
          var key = idValue + encryptDes(jbbhm, 'vvvversion') + "resultttt";
          var result = decryptDes(res.data, key);
          result = JSON.parse(result);
          console.log(res)
          if (result) {
            setSessionStorage('jbbhm', result.nextVersion)
            this.verifyLink(result.url);
          }
        } else {
          throw res
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  computed: {
    ...mapState({
      direction: state => state.direction
    }),
    ...mapGetters({
      userInfo: 'user/userInfo',
      theme: 'home/theme'
    }),
  }
};
</script>

<style lang="scss">
.overflow-auto {
  overflow: auto;
}

textarea {
  resize: none;
  border: none;
}

// :root {

// }

li {
  list-style: none;
}

@import "assets/init";
@import "assets/mixin";

body {
  @include themify() {
    background: themed("footer_background");
  }
}

#app {
  width: 100%;
  height: 100%;
  position: relative;
  //overflow-y: scroll;  //加了这个跳转页面不会回到顶部
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;

  @include themify() {
    background: themed("main_background");
  }
}

.status-bar {
  @include themify() {
    background: themed("main_background");
  }
}

.appContent {
  @include themify() {
    background: themed("main_background");
  }

  padding-bottom: calc(108px + constant(safe-area-inset-bottom)) !important;
  padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
}

// 上传图片框大小设置
.van-uploader__upload {
  width: 220px !important;
  height: 220px !important;
}

.van-uploader__upload-icon {
  font-size: 48px !important;
}

.van-uploader__upload {
  @include themify() {
    background: themed("upload_bg");
  }

  border: 2px dashed #b8bcc5;
}

// tab标签短横线颜色
.van-tabs__line {
  @include themify() {
    background: themed("active_line");
  }
}

.van-tabs__wrap {
  height: 70px !important;
}

.van-tab__text--ellipsis {
  overflow: visible !important;
  -webkit-box-orient: horizontal !important; //修复K线tab标题文字显示不全
}

.van-tab__text {
  //font-size: 30px !important;
}

.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 250ms;
  height: 100%;
  top: 0;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}

.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

#mining-account {
  .van-grid-item__content {
    padding: 41px 0;
  }
}



#assetsHead {
  .van-nav-bar__content {
    height: 96px;
  }

  .van-nav-bar__left {
    padding-left: 30px;
  }

  .van-nav-bar-icon {
    color: #999999;
  }

  .van-nav-bar__arrow {
    font-size: 48px !important;
    color: $dark-grey;
  }

  .van-nav-bar__title {
    font-size: 36px;
    font-weight: 400;

    @include themify() {
      color: themed("text_color");
    }

    max-width: 80% !important;
  }
}

.upload-wrap {
  .van-uploader__preview {
    margin: 0 !important;
  }
}

.popup-delivery {
  .van-circle {
    width: 300px !important;
    height: 300px !important;
  }

  .van-count-down {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    font-size: 40px;
  }
}

.list-quatation {
  .van-cell {
    padding: 30px 0 !important;

    @include themify() {
      background: themed("main_background") !important;
    }

    &::after {
      @include themify() {
        border-bottom: 1px solid themed("line_color") !important;
      }

      border: none;
    }
  }
}


.nationList {
  .van-action-sheet {
    height: 80%;
  }
}

#withdraw_verify {
  .van-field-word-limit-line-height {
    height: 30px;
  }
}

#editAd {
  .van-dropdown-menu__item {
    justify-content: left;
  }

  .van-dropdown-menu__title::after {
    right: -200px;
    border-color: #3c507100 transparent #323233f7 #36689a;
  }

  //.van-cell{
  //  background-color: #eee;
  //}
  .bg {
    .van-cell {
      background-color: #FFFFFF;
    }
  }
}

#wantBuy {
  .van-popover__action {
    width: 320px;
  }

}

.adScreening {
  .van-cell {
    line-height: 100px;
  }

  .van-field__control {
    @include themify() {
      background: themed("tab_background");
    }

    padding-left: 20px;
  }
}

.vue-auth-box_ .auth-control_ .range-box {
  background-color: #EAEAEA !important;
  height: 30px !important;
  margin-bottom: 40px;
}

.vue-auth-box_ .auth-control_ .range-box .range-slider .range-btn {
  width: 140px !important;
  height: 74px !important;
  background: #1D91FF !important;
  border-radius: 96px !important;
  top: -50%;
}

.vue-auth-box_ .auth-control_ .range-box .range-slider .range-btn>div {
  border: solid 1px #fff !important;
  border-radius: 4px;
}

.van-toast {
  width: 300px;
}

.van-toast__text {
  word-break: break-word;
}

.van-tabbar--fixed {
  z-index: 10;
  padding-bottom: constant(safe-area-inset-bottom);
}

#buy_nav {
  .van-nav-bar__title {
    font-size: 36px !important;
  }
}

.van-cell-group {
  &::after {
    border: none;
  }
}

.van-collapse {
  &::after {
    border: none;
  }
}

.van-cell {
  padding: 0;
  color: #868D9A;

  &::after {
    border: none;
  }

  .van-cell__value {
    color: #000;
  }
}

.van-popup {
  @include themify() {
    background: themed("main_background");
  }
}

.van-nav-bar__title {
  @include themify() {
    color: themed("text_color");
  }
}

.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border: none;
}

.van-dialog {
  @include themify() {
    background: themed("main_background");
  }
}

.van-dialog__header {
  @include themify() {
    color: themed("text_color");
  }
}

.van-dialog__message--has-title {
  color: $dark-grey;
}

.van-button--default {
  @include themify() {
    background: themed("main_background");
  }

  color: $dark-grey;
}

.van-nav-bar {
  @include themify() {
    background: themed("main_background");
  }

  line-height: normal;
}

.van-dropdown-menu__title {
  @include themify() {
    color: themed("text_color");
  }
}

.van-nav-bar__right {
  @include themify() {
    color: themed("text_color");
  }
}

.van-nav-bar__arrow {
  font-size: 48px !important;
  color: $dark-grey;
}

.van-nav-bar-icon {
  color: #999999 !important;
}

.no_touch {
  -webkit-user-select: none;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
}

.van-dialog__footer {
  @include themify() {
    background: themed("main_background");
  }
}

.van-dialog__message {
  @include themify() {
    color: themed("text_color");
  }
}

.van-checkbox__icon--checked {
  .van-icon {
    background-color: #fff !important;
      border-color: #000 !important;
      &::before{
      color: #000 !important;
    }
  }
}
</style>
